<template>
  <div class="box box1">
    <div
      class="contentbox"
      v-loading="loading"
      element-loading-text="Loading"
      element-loading-spinner="el-icon-loading"
    >
      <i class="el-icon-refresh refresh" title="点击刷新" @click="nowref" />
      <div class="title">{{ nowtitle }}</div>
      <div class="wrap">
        <div class="paynum">
          <div class="paytitle">支付金额</div>
          <div class="numbers">
            <count-to
              :start="0"
              :end="PanelData.now_paymoney"
              :duration="2600"
              class="card-panel-num"
            />

            <span
              style="
                font-size: 1.125rem;
                transform: scale(0.7);
                display: inline-block;
              "
              >元</span
            >
          </div>
        </div>
        <div class="paynum">
          <div class="paytitle">支付笔数</div>
          <div class="numbers">
            <count-to
              :start="0"
              :end="PanelData.now_paycount"
              :duration="2600"
              class="card-panel-num"
            />
            <span
              style="
                font-size: 1.125rem;
                transform: scale(0.7);
                display: inline-block;
              "
              >笔</span
            >
          </div>
        </div>
        <div class="paynum">
          <div class="paytitle">退款金额</div>
          <div class="numbers">
            <count-to
              :start="0"
              :end="PanelData.now_refundmoney"
              :duration="2600"
              class="card-panel-num"
            />
            <span
              style="
                font-size: 1.125rem;
                transform: scale(0.7);
                display: inline-block;
              "
              >元</span
            >
          </div>
        </div>
        <div class="paynum">
          <div class="paytitle">退款笔数</div>
          <div class="numbers">
            <count-to
              :start="0"
              :end="PanelData.now_refundcount"
              :duration="2600"
              class="card-panel-num"
            />
            <span
              style="
                font-size: 1.125rem;
                transform: scale(0.7);
                display: inline-block;
              "
              >笔</span
            >
          </div>
        </div>
        <div class="paynum">
          <div class="paytitle">实际应收金额</div>
          <div class="numbers">
            <count-to
              :start="0"
              :end="PanelData.now_realmoney"
              :duration="2600"
              class="card-panel-num"
            />
            <span
              style="
                font-size: 1.125rem;
                transform: scale(0.7);
                display: inline-block;
              "
              >元</span
            >
          </div>
        </div>
        <div class="paynum pointer" @click="now_payerrorlick">
          <div
            :class="[
              PanelData.now_payerror > 0 ? 'paytitle red' : '',
              'paytitle',
            ]"
          >
            交易失败笔数
          </div>
          <div
            :class="[
              PanelData.now_payerror > 0 ? 'numbers red' : '',
              'numbers',
            ]"
          >
            <count-to
              :start="0"
              :end="PanelData.now_payerror"
              :duration="2600"
              class="card-panel-num"
            />
            <span
              style="
                font-size: 1.125rem;
                transform: scale(0.7);
                display: inline-block;
              "
              >笔</span
            >
          </div>
        </div>
        <div class="paynum pointer" @click="now_recerrorClick">
          <div
            :class="[
              PanelData.now_recerror > 0 ? 'paytitle red' : '',
              'paytitle',
            ]"
          >
            对账异常笔数
          </div>
          <div
            :class="[
              PanelData.now_recerror > 0 ? 'numbers red' : '',
              'numbers',
            ]"
          >
            <count-to
              :start="0"
              :end="PanelData.now_recerror"
              :duration="2600"
              class="card-panel-num"
            />
            <span
              style="
                font-size: 1.125rem;
                transform: scale(0.7);
                display: inline-block;
              "
              >笔</span
            >
          </div>
        </div>

        <div
          class="detail"
          style="
            background: linear-gradient(
              to top left,
              #e4effb 50%,
              transparent 50%
            );
          "
        >
          <div class="txt" style="cursor: pointer" @click="dayclick">
            查看明细>>
          </div>
        </div>
      </div>
    </div>

    <div
      class="contentbox"
      v-loading="loadingmouth"
      element-loading-text="Loading"
      element-loading-spinner="el-icon-loading"
    >
      <i class="el-icon-refresh refresh" title="点击刷新" @click="nowmothref" />
      <div class="title">{{ nowmothtitle }}</div>
      <div class="wrap">
        <div class="paynum">
          <div class="paytitle">支付金额</div>
          <div class="numbers">
            <count-to
              :start="0"
              :end="MothPanelData.month_paymoney"
              :duration="2600"
              class="card-panel-num"
            />
            <span
              style="
                font-size: 1.125rem;
                transform: scale(0.7);
                display: inline-block;
              "
              >元</span
            >
          </div>
        </div>
        <div class="paynum">
          <div class="paytitle">支付笔数</div>
          <div class="numbers">
            <count-to
              :start="0"
              :end="MothPanelData.month_paycount"
              :duration="2600"
              class="card-panel-num"
            />
            <span
              style="
                font-size: 1.125rem;
                transform: scale(0.7);
                display: inline-block;
              "
              >笔</span
            >
          </div>
        </div>
        <div class="paynum">
          <div class="paytitle">退款金额</div>
          <div class="numbers">
            <count-to
              :start="0"
              :end="MothPanelData.month_refundmoney"
              :duration="2600"
              class="card-panel-num"
            />
            <span
              style="
                font-size: 1.125rem;
                transform: scale(0.7);
                display: inline-block;
              "
              >元</span
            >
          </div>
        </div>
        <div class="paynum">
          <div class="paytitle">退款笔数</div>
          <div class="numbers">
            <count-to
              :start="0"
              :end="MothPanelData.month_refundcount"
              :duration="2600"
              class="card-panel-num"
            />
            <span
              style="
                font-size: 1.125rem;
                transform: scale(0.7);
                display: inline-block;
              "
              >笔</span
            >
          </div>
        </div>
        <div class="paynum">
          <div class="paytitle">实际应收金额</div>
          <div class="numbers">
            <count-to
              :start="0"
              :end="MothPanelData.month_realmoney"
              :duration="2600"
              class="card-panel-num"
            />
            <span
              style="
                font-size: 1.125rem;
                transform: scale(0.7);
                display: inline-block;
              "
              >元</span
            >
          </div>
        </div>
        <div class="paynum pointer" @click="mouth_payerrorlick">
          <div
            :class="[
              MothPanelData.month_payerror > 0 ? 'paytitle red' : '',
              'paytitle',
            ]"
          >
            交易失败笔数
          </div>
          <div
            :class="[
              MothPanelData.month_payerror > 0 ? 'numbers red' : '',
              'numbers',
            ]"
          >
            <count-to
              :start="0"
              :end="MothPanelData.month_payerror"
              :duration="2600"
              class="card-panel-num"
            />
            <span
              style="
                font-size: 1.125rem;
                transform: scale(0.7);
                display: inline-block;
              "
              >笔</span
            >
          </div>
        </div>
        <div class="paynum pointer" @click="moth_recerrorClick">
          <div
            :class="[
              MothPanelData.month_recerror > 0 ? 'paytitle red' : '',
              'paytitle',
            ]"
          >
            对账异常笔数
          </div>
          <div
            :class="[
              MothPanelData.month_recerror > 0 ? 'numbers red' : '',
              'numbers',
            ]"
          >
            <count-to
              :start="0"
              :end="MothPanelData.month_recerror"
              :duration="2600"
              class="card-panel-num"
            />
            <span
              style="
                font-size: 1.125rem;
                transform: scale(0.7);
                display: inline-block;
              "
              >笔</span
            >
          </div>
        </div>
        <div
          class="detail"
          style="
            background: linear-gradient(
              to top left,
              #faf3ec 50%,
              transparent 50%
            );
          "
        >
          <div
            class="txt"
            style="color: #ffb157; cursor: pointer"
            @click="mothclick"
          >
            查看明细>>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CountTo from "vue-number-scroll";
import { AjaxToken } from "@/api/common";
import { Loading } from "element-ui";
import { date } from "jszip/lib/defaults";
import "url-search-params-polyfill";
export default {
  components: {
    CountTo,
  },
  props: {
    StDt: "",
    EdDt: "",
    CpnID: "",
    ChnanelId: "",
  },
  data() {
    return {
      loading: true,
      loadingmouth: true,
      hour: 0,
      nowtitle: "前日",
      nowmothtitle: "当月",
      PanelData: {
        now_paymoney: 0,
        now_paycount: 0,
        now_refundmoney: 0,
        now_refundcount: 0,
        now_realmoney: 0,
        now_payerror: 0,
        now_recerror: 0,
        month_paymoney: 0,
        month_paycount: 0,
        month_refundmoney: 0,
        month_refundcount: 0,
        month_realmoney: 0,
        month_payerror: 0,
        month_recerror: 0,
      },
      MothPanelData: {
        now_paymoney: 0,
        now_paycount: 0,
        now_refundmoney: 0,
        now_refundcount: 0,
        now_realmoney: 0,
        now_payerror: 0,
        now_recerror: 0,
        month_paymoney: 0,
        month_paycount: 0,
        month_refundmoney: 0,
        month_refundcount: 0,
        month_realmoney: 0,
        month_payerror: 0,
        month_recerror: 0,
      },
    };
  },
  watch: {
    CpnID: {
      deep: true,
      handler(val) {
        this.Seach();
      },
    },
    ChnanelId: {
      deep: true,
      handler(val) {
        this.Seach();
      },
    },
    EdDt: {
      deep: true,
      handler(val) {
        this.Seach();
      },
    },
    StDt: {
      deep: true,
      handler(val) {
        this.Seach();
      },
    },
  },
  created() {
    this.hour = new Date().getHours();
    var year = new Date().getFullYear();
    var month = new Date().getMonth() + 1;
    var day = new Date().getDate();
    if (this.hour >= 12) {
      this.nowtitle = "昨日(" + backstage.RgDay(1 + 1) + ")";
    } else {
      this.nowtitle = "前日(" + backstage.RgDay(2 + 1) + ")";
    }
    this.nowmothtitle = "当月(" + year + "-" + month + ")";
    this.Seach();
  },
  methods: {
    nowref() {
      this.loading = true;
      var params = new URLSearchParams();
      params.append("CpnID", this.CpnID);
      params.append("ChannelName", this.ChnanelId);
      params.append("Tp", "0");
      params.append("StDt", this.StDt);
      params.append("EdDt", this.EdDt);
      this.PanelData = {
        now_paymoney: 0,
        now_paycount: 0,
        now_refundmoney: 0,
        now_refundcount: 0,
        now_realmoney: 0,
        now_payerror: 0,
        now_recerror: 0,
        month_paymoney: 0,
        month_paycount: 0,
        month_refundmoney: 0,
        month_refundcount: 0,
        month_realmoney: 0,
        month_payerror: 0,
        month_recerror: 0,
      };
      backstage.GetPanelData(this, params);
    },
    nowmothref() {
      this.loadingmouth = true;
      var params = new URLSearchParams();
      params.append("CpnID", this.CpnID);
      params.append("ChannelName", this.ChnanelId);
      params.append("Tp", "1");
      params.append("StDt", this.StDt);
      params.append("EdDt", this.EdDt);
      (this.MothPanelData = {
        now_paymoney: 0,
        now_paycount: 0,
        now_refundmoney: 0,
        now_refundcount: 0,
        now_realmoney: 0,
        now_payerror: 0,
        now_recerror: 0,
        month_paymoney: 0,
        month_paycount: 0,
        month_refundmoney: 0,
        month_refundcount: 0,
        month_realmoney: 0,
        month_payerror: 0,
        month_recerror: 0,
      }),
        backstage.GetMothPanelData(this, params);
    },
    mothclick() {
      this.$router.push({ path: "/Reconciliation/Rcncbtch", query: { tp: 0 } }); //当月
    },
    dayclick() {
      this.$router.push({ path: "/Reconciliation/Rcncbtch", query: { tp: 1 } }); //昨日
    },
    now_payerrorlick() {
      this.$router.push({ path: "/Report/Itemized", query: { tp: "day" } });
    },
    mouth_payerrorlick() {
      this.$router.push({ path: "/Report/Itemized", query: { tp: "moth" } });
    },
    now_recerrorClick() {
      this.$router.push({ path: "/Reconciliation/DifOrds", query: { tp: 1 } });
    },
    moth_recerrorClick() {
      this.$router.push({ path: "/Reconciliation/DifOrds", query: { tp: 0 } });
    },
    Seach() {
      this.loading = true;
      this.loadingmouth = true;
      var params = new URLSearchParams();
      params.append("CpnID", this.CpnID);
      params.append("ChannelName", this.ChnanelId);
      params.append("Tp", "0");
      params.append("StDt", this.StDt);
      params.append("EdDt", this.EdDt);
      var st = new Date(this.StDt)
        .toLocaleDateString()
        .replace("/", "-")
        .replace("/", "-");
      var dt = new Date(this.EdDt)
        .toLocaleDateString()
        .replace("/", "-")
        .replace("/", "-");
    
      if (this.StDt == "" || this.StDt == null) {
        this.nowtitle = "截至" + dt;
      } else if (this.EdDt == "" || this.EdDt == null) {
        this.nowtitle = "自" + st + "至昨日";
      }else{
        this.nowtitle = st + "至" + dt;
      }
       
      if (
        (this.StDt == "" || this.StDt == null) &&
        (this.EdDt == "" || this.EdDt == null)
      ) {
        this.hour = new Date().getHours();
        var year = new Date().getFullYear();
        var month = new Date().getMonth() + 1;
        var day = new Date().getDate();
        if (this.hour >= 12) {
          this.nowtitle = "昨日(" + backstage.RgDay(1 + 1) + ")";
        } else {
          this.nowtitle = "前日(" + backstage.RgDay(2 + 1) + ")";
        }
      }

      backstage.GetPanelData(this, params);

      params = new URLSearchParams();
      params.append("CpnID", this.CpnID);
      params.append("ChannelName", this.ChnanelId);
      params.append("Tp", "1");
      params.append("StDt", this.StDt);
      params.append("EdDt", this.EdDt);
      backstage.GetMothPanelData(this, params);
    },
  },
};

// 后台事件
var backstage = {
  // 获取Pymcverrcd集合
  GetPanelData: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "GetPanelData",
      params,
      "post",
      function (res) {
        var body = res.data.data;
        thisobj.PanelData = body;
        thisobj.loading = false;
      },
      function (err) {
        thisobj.loading = false;
      }
    );
  },
  RgDay: function (days) {
    if (
      days == "" ||
      days == null ||
      days == undefined ||
      typeof days != "number"
    ) {
      return false;
    }
    var res = ""; //返回数据
    var today = new Date().getTime(); //今天
    for (var i = 0; i < days; i++) {
      var _day = new Date(today - 86400000 * i),
        year = _day.getFullYear(),
        month = _day.getMonth() + 1,
        day = _day.getDate();
      month < 10 ? "0" + month : month;
      day < 10 ? "0" + day : day;
      //res.push(year + "-" + month + "-" + day);
      res = year + "-" + month + "-" + day;
    }
    return res;
  },
  // 获取Pymcverrcd集合
  GetMothPanelData: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "GetPanelData",
      params,
      "post",
      function (res) {
        var body = res.data.data;
        thisobj.MothPanelData = body;
        thisobj.loadingmouth = false;
      },
      function (err) {
        thisobj.loadingmouth = false;
      }
    );
  },
};
</script>
<style type="span/css" lang="scss" scoped>
.box {
  display: flex;
  justify-content: space-around;
}
.contentbox {
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 1.5rem;
  width: 49%;
  background-color: white;
  border: solid 1px transparent;
}
.title {
  font-size: 1.125rem;
  font-weight: 400;
  opacity: 1;
  margin-left: 3%;
  color: #304156;
  margin-top: 1.875rem;
}
.refresh {
  position: relative;
  left: 95%;
  top: 8px;
  font-size: 20px;
}
.wrap {
  display: flex;
  flex-wrap: wrap;
  width: 97%;
  margin-left: 3%;
  position: relative;
}
.paynum {
  margin-top: 1.25rem;
  width: 25%;
  padding-bottom: 1.25rem;
}
.pointer {
  cursor: pointer !important;
}
.paytitle {
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(195, 202, 210, 1);
  opacity: 1;
}
.numbers {
  margin-top: 0.5rem;
  font-size: 1.5rem;
  font-weight: 400;
  color: rgba(48, 65, 86, 1);
  opacity: 1;
}
.detail {
  width: 26%;
  height: 5.625rem;
  position: absolute;
  right: -1px;
  bottom: -1px;
  border-bottom-right-radius: 1.5rem;
  color: #409eff;
  font-size: 0.875rem;
}
.txt {
  position: absolute;
  bottom: 1.25rem;
  right: 7%;
}
.red {
  color: red;
}
</style>
